```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bug处理全流程指南 | 专业开发实践</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #333;
            background-color: #f9fafb;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .step-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .tool-badge {
            transition: all 0.3s ease;
        }
        .tool-badge:hover {
            background-color: #4f46e5;
            color: white;
        }
        .section-divider {
            height: 2px;
            background: linear-gradient(90deg, rgba(102,126,234,0.1) 0%, rgba(102,126,234,0.8) 50%, rgba(102,126,234,0.1) 100%);
        }
        .drop-cap:first-letter {
            float: left;
            font-size: 4rem;
            line-height: 0.65;
            margin: 0.1em 0.2em 0 0;
            font-weight: 700;
            color: #4f46e5;
        }
    </style>
</head>
<body class="antialiased">
    <!-- Hero Section -->
    <div class="hero-gradient text-white py-20 px-4 sm:px-6 lg:px-8">
        <div class="max-w-7xl mx-auto text-center">
            <h1 class="text-4xl md:text-6xl font-bold mb-6 font-serif">Bug处理全流程指南</h1>
            <p class="text-xl md:text-2xl max-w-3xl mx-auto leading-relaxed">
                系统化、高效的问题定位与解决方案，确保项目稳定运行
            </p>
            <div class="mt-10">
                <div class="inline-flex items-center px-6 py-3 bg-white text-indigo-600 rounded-lg font-medium hover:bg-gray-100 transition duration-300">
                    <i class="fas fa-bug mr-2"></i>
                    <span>探索处理流程</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Content -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
        <!-- Introduction -->
        <div class="mb-20">
            <p class="drop-cap text-lg leading-relaxed text-gray-700 mb-6">
                上线项目后的Bug定位和处理涉及多个方面，包括信息收集、Bug重现、日志分析、代码审查、修复实施、部署验证以及团队协作等。通过系统化的流程和工具，能够高效地定位和解决Bug，确保系统的稳定性和用户的满意度。在项目中积累的经验和教训也有助于预防类似问题的再次发生。
            </p>
            <div class="grid md:grid-cols-2 gap-8">
                <div class="bg-white p-6 rounded-xl shadow-md border-l-4 border-indigo-500">
                    <h3 class="text-xl font-bold mb-3 text-indigo-600 flex items-center">
                        <i class="fas fa-lightbulb mr-2"></i> 关键洞察
                    </h3>
                    <p class="text-gray-700">
                        系统化的Bug处理流程可以将平均解决时间缩短40%，同时降低同类问题的复发率。
                    </p>
                </div>
                <div class="bg-white p-6 rounded-xl shadow-md border-l-4 border-blue-500">
                    <h3 class="text-xl font-bold mb-3 text-blue-600 flex items-center">
                        <i class="fas fa-chart-line mr-2"></i> 数据统计
                    </h3>
                    <p class="text-gray-700">
                        有效的日志分析和监控可以减少75%的问题定位时间，提高开发团队的整体效率。
                    </p>
                </div>
            </div>
        </div>

        <!-- Process Visualization -->
        <div class="mb-20">
            <h2 class="text-3xl font-bold mb-8 text-center font-serif">Bug处理流程图</h2>
            <div class="bg-white p-6 rounded-xl shadow-lg">
                <div class="mermaid">
                    graph TD
                    A[确认Bug存在] --> B[收集信息]
                    A --> C[重现Bug]
                    B --> D[定位Bug]
                    C --> D
                    D --> E[分析日志]
                    D --> F[使用调试工具]
                    D --> G[回顾代码变更]
                    D --> H[检查配置文件]
                    D --> I[修复Bug]
                    I --> J[分析问题根源]
                    I --> K[实施修复]
                    I --> L[验证修复]
                    I --> M[部署修复]
                    M --> N[准备发布]
                    M --> O[进行部署]
                    M --> P[监控验证]
                    I --> Q[防止再发]
                    Q --> R[代码审查]
                    Q --> S[改进测试覆盖]
                    Q --> T[更新文档]
                    I --> U[团队协作]
                    U --> V[沟通与汇报]
                    U --> W[知识分享]
                </div>
            </div>
        </div>

        <!-- Process Steps -->
        <div class="space-y-20">
            <!-- Step 1 -->
            <div>
                <div class="flex items-center mb-6">
                    <div class="flex items-center justify-center w-12 h-12 rounded-full bg-indigo-100 text-indigo-600 font-bold text-xl mr-4">1</div>
                    <h2 class="text-3xl font-bold font-serif">确认Bug的存在</h2>
                </div>
                <div class="grid md:grid-cols-2 gap-8">
                    <div class="step-card bg-white p-8 rounded-xl shadow-md transition duration-300">
                        <h3 class="text-xl font-bold mb-4 text-gray-800 flex items-center">
                            <i class="fas fa-info-circle text-indigo-500 mr-2"></i> 收集信息
                        </h3>
                        <p class="text-gray-700 mb-4">
                            从用户或监控系统收集Bug的详细信息，包括错误信息、日志、复现步骤等。
                        </p>
                        <div class="flex flex-wrap gap-2">
                            <span class="tool-badge px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">Sentry</span>
                            <span class="tool-badge px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">Logstash</span>
                            <span class="tool-badge px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">用户反馈系统</span>
                        </div>
                    </div>
                    <div class="step-card bg-white p-8 rounded-xl shadow-md transition duration-300">
                        <h3 class="text-xl font-bold mb-4 text-gray-800 flex items-center">
                            <i class="fas fa-redo text-indigo-500 mr-2"></i> 重现Bug
                        </h3>
                        <p class="text-gray-700 mb-4">
                            尝试在开发环境或测试环境中复现Bug。重现Bug可以帮助更好地理解问题的本质。
                        </p>
                        <div class="flex flex-wrap gap-2">
                            <span class="tool-badge px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">调试工具</span>
                            <span class="tool-badge px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">日志分析</span>
                            <span class="tool-badge px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">测试环境</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Divider -->
            <div class="section-divider my-8"></div>

            <!-- Step 2 -->
            <div>
                <div class="flex items-center mb-6">
                    <div class="flex items-center justify-center w-12 h-12 rounded-full bg-indigo-100 text-indigo-600 font-bold text-xl mr-4">2</div>
                    <h2 class="text-3xl font-bold font-serif">定位Bug</h2>
                </div>
                <div class="grid md:grid-cols-2 gap-8">
                    <div class="step-card bg-white p-8 rounded-xl shadow-md transition duration-300">
                        <h3 class="text-xl font-bold mb-4 text-gray-800 flex items-center">
                            <i class="fas fa-search text-indigo-500 mr-2"></i> 分析日志
                        </h3>
                        <p class="text-gray-700 mb-4">
                            查看应用程序和系统日志，寻找异常信息和错误堆栈。
                        </p>
                        <div class="flex flex-wrap gap-2">
                            <span class="tool-badge px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">ELK Stack</span>
                            <span class="tool-badge px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">Splunk</span>
                            <span class="tool-badge px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">系统监控</span>
                        </div>
                    </div>
                    <div class="step-card bg-white p-8 rounded-xl shadow-md transition duration-300">
                        <h3 class="text-xl font-bold mb-4 text-gray-800 flex items-center">
                            <i class="fas fa-code text-indigo-500 mr-2"></i> 使用调试工具
                        </h3>
                        <p class="text-gray-700 mb-4">
                            在开发环境中使用调试工具逐步跟踪代码执行流程。
                        </p>
                        <div class="flex flex-wrap gap-2">
                            <span class="tool-badge px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">IntelliJ IDEA</span>
                            <span class="tool-badge px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">Eclipse</span>
                            <span class="tool-badge px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">VS Code</span>
                        </div>
                    </div>
                    <div class="step-card bg-white p-8 rounded-xl shadow-md transition duration-300">
                        <h3 class="text-xl font-bold mb-4 text-gray-800 flex items-center">
                            <i class="fas fa-history text-indigo-500 mr-2"></i> 回顾代码变更
                        </h3>
                        <p class="text-gray-700 mb-4">
                            检查最近的代码提交和变更，确认是否与Bug相关。
                        </p>
                        <div class="flex flex-wrap gap-2">
                            <span class="tool-badge px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">Git</span>
                            <span class="tool-badge px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">GitHub</span>
                            <span class="tool-badge px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">GitLab</span>
                        </div>
                    </div>
                    <div class="step-card bg-white p-8 rounded-xl shadow-md transition duration-300">
                        <h3 class="text-xl font-bold mb-4 text-gray-800 flex items-center">
                            <i class="fas fa-cog text-indigo-500 mr-2"></i> 检查配置文件
                        </h3>
                        <p class="text-gray-700 mb-4">
                            核对相关配置文件，确保配置项的正确性和一致性。
                        </p>
                        <div class="flex flex-wrap gap-2">
                            <span class="tool-badge px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">Spring Boot Config</span>
                            <span class="tool-badge px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">Consul</span>
                            <span class="tool-badge px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">环境变量</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Divider -->
            <div class="section-divider my-8"></div>

            <!-- Step 3 -->
            <div>
                <div class="flex items-center mb-6">
                    <div class="flex items-center justify-center w-12 h-12 rounded-full bg-indigo-100 text-indigo-600 font-bold text-xl mr-4">3</div>
                    <h2 class="text-3xl font-bold font-serif">修复Bug</h2>
                </div>
                <div class="grid md:grid-cols-3 gap-8">
                    <div class="step-card bg-white p-8 rounded-xl shadow-md transition duration-300">
                        <h3 class="text-xl font-bold mb-4 text-gray-800 flex items-center">
                            <i class="fas fa-search-plus text-indigo-500 mr-2"></i> 分析问题根源
                        </h3>
                        <p class="text-gray-700 mb-4">
                            根据Bug定位信息，分析问题的根本原因，确定修复方案。
                        </p>
                        <div class="flex flex-wrap gap-2">
                            <span class="tool-badge px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">代码审查</span>
                            <span class="tool-badge px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">性能分析</span>
                        </div>
                    </div>
                    <div class="step-card bg-white p-8 rounded-xl shadow-md transition duration-300">
                        <h3 class="text-xl font-bold mb-4 text-gray-800 flex items-center">
                            <i class="fas fa-wrench text-indigo-500 mr-2"></i> 实施修复
                        </h3>
                        <p class="text-gray-700 mb-4">
                            在开发环境中实施修复，进行单元测试和集成测试。
                        </p>
                        <div class="flex flex-wrap gap-2">
                            <span class="tool-badge px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">JUnit</span>
                            <span class="tool-badge px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">TestNG</span>
                            <span class="tool-badge px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">Jenkins</span>
                        </div>
                    </div>
                    <div class="step-card bg-white p-8 rounded-xl shadow-md transition duration-300">
                        <h3 class="text-xl font-bold mb-4 text-gray-800 flex items-center">
                            <i class="fas fa-check-circle text-indigo-500 mr-2"></i> 验证修复
                        </h3>
                        <p class="text-gray-700 mb-4">
                            在测试环境中验证修复是否有效，确保修复没有引入新的问题。
                        </p>
                        <div class="flex flex-wrap gap-2">
                            <span class="tool-badge px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">测试环境</span>
                            <span class="tool-badge px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">监控系统</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Divider -->
            <div class="section-divider my-8"></div>

            <!-- Step 4 -->
            <div>
                <div class="flex items-center mb-6">
                    <div class="flex items-center justify-center w-12 h-12 rounded-full bg-indigo-100 text-indigo-600 font-bold text-xl mr-4">4</div>
                    <h2 class="text-3xl font-bold font-serif">部署修复</h2>
                </div>
                <div class="grid md:grid-cols-3 gap-8">
                    <div class="step-card bg-white p-8 rounded-xl shadow-md transition duration-300">
                        <h3 class="text-xl font-bold mb-4 text-gray-800 flex items-center">
                            <i class="fas fa-box-open text-indigo-500 mr-2"></i> 准备发布
                        </h3>
                        <p class="text-gray-700 mb-4">
                            将修复代码打包，并准备发布到生产环境。
                        </p>
                        <div class="flex flex-wrap gap-2">
                            <span class="tool-badge px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">Maven</span>
                            <span class="tool-badge px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">Gradle</span>
                            <span class="tool-badge px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">版本发布</span>
                        </div>
                    </div>
                    <div class="step-card bg-white p-8 rounded-xl shadow-md transition duration-300">
                        <h3 class="text-xl font-bold mb-4 text-gray-800 flex items-center">
                            <i class="fas fa-rocket text-indigo-500 mr-2"></i> 进行部署
                        </h3>
                        <p class="text-gray-700 mb-4">
                            在生产环境中部署修复，确保部署过程中的平滑过渡。
                        </p>
                        <div class="flex flex-wrap gap-2">
                            <span class="tool-badge px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">Ansible</span>
                            <span class="tool-badge px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">Docker</span>
                            <span class="tool-badge px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">Kubernetes</span>
                        </div>
                    </div>
                    <div class="step-card bg-white p-8 rounded-xl shadow-md transition duration-300">
                        <h3 class="text-xl font-bold mb-4 text-gray-800 flex items-center">
                            <i class="fas fa-chart-bar text-indigo-500 mr-2"></i> 监控和验证
                        </h3>
                        <p class="text-gray-700 mb-4">
                            监控生产环境中的应用，确保修复后的系统正常运行。
                        </p>
                        <div class="flex flex-wrap gap-2">
                            <span class="tool-badge px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">New Relic</span>
                            <span class="tool-badge px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">Datadog</span>
                            <span class="tool-badge px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">Prometheus</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Divider -->
            <div class="section-divider my-8"></div>

            <!-- Step 5 -->
            <div>
                <div class="flex items-center mb-6">
                    <div class="flex items-center justify-center w-12 h-12 rounded-full bg-indigo-100 text-indigo-600 font-bold text-xl mr-4">5</div>
                    <h2 class="text-3xl font-bold font-serif">防止再发</h2>
                </div>
                <div class="grid md:grid-cols-3 gap-8">
                    <div class="step-card bg-white p-8 rounded-xl shadow-md transition duration-300">
                        <h3 class="text-xl font-bold mb-4 text-gray-800 flex items-center">
                            <i class="fas fa-code-review text-indigo-500 mr-2"></i> 代码审查
                        </h3>
                        <p class="text-gray-700 mb-4">
                            进行代码审查，识别和修复潜在的Bug。
                        </p>
                        <div class="flex flex-wrap gap-2">
                            <span class="tool-badge px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">Gerrit</span>
                            <span class="tool-badge px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">GitHub PR</span>
                            <span class="tool-badge px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">Code Review</span>
                        </div>
                    </div>
                    <div class="step-card bg-white p-8 rounded-xl shadow-md transition duration-300">
                        <h3 class="text-xl font-bold mb-4 text-gray-800 flex items-center">
                            <i class="fas fa-vial text-indigo-500 mr-2"></i> 改进测试覆盖
                        </h3>
                        <p class="text-gray-700 mb-4">
                            增加测试用例，确保类似问题在未来能够被检测到。
                        </p>
                        <div class="flex flex-wrap gap-2">
                            <span class="tool-badge px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">JaCoCo</span>
                            <span class="tool-badge px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">Cobertura</span>
                            <span class="tool-badge px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">单元测试</span>
                        </div>
                    </div>
                    <div class="step-card bg-white p-8 rounded-xl shadow-md transition duration-300">
                        <h3 class="text-xl font-bold mb-4 text-gray-800 flex items-center">
                            <i class="fas fa-book text-indigo-500 mr-2"></i> 更新文档
                        </h3>
                        <p class="text-gray-700 mb-4">
                            更新技术文档和问题追踪系统，记录Bug的详细信息和修复方法。
                        </p>
                        <div class="flex flex-wrap gap-2">
                            <span class="tool-badge px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">Confluence</span>
                            <span class="tool-badge px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">JIRA</span>
                            <span class="tool-badge px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">Wiki</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Divider -->
            <div class="section-divider my-8"></div>

            <!-- Step 6 -->
            <div>
                <div class="flex items-center mb-6">
                    <div class="flex items-center justify-center w-12 h-12 rounded-full bg-indigo-100 text-indigo-600 font-bold text-xl mr-4">6</div>
                    <h2 class="text-3xl font-bold font-serif">团队协作</h2>
                </div>
                <div class="grid md:grid-cols-2 gap-8">
                    <div class="step-card bg-white p-8 rounded-xl shadow-md transition duration-300">
                        <h3 class="text-xl font-bold mb-4 text-gray-800 flex items-center">
                            <i class="fas fa-comments text-indigo-500 mr-2"></i> 沟通与汇报
                        </h3>
                        <p class="text-gray-700 mb-4">
                            及时与团队成员和利益相关者沟通Bug的状态、修复进度和影响。
                        </p>
                        <div class="flex flex-wrap gap-2">
                            <span class="tool-badge px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">Slack</span>
                            <span class="tool-badge px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">Teams</span>
                            <span class="tool-badge px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">邮件</span>
                        </div>
                    </div>
                    <div class="step-card bg-white p-8 rounded-xl shadow-md transition duration-300">
                        <h3 class="text-xl font-bold mb-4 text-gray-800 flex items-center">
                            <i class="fas fa-share-alt text-indigo-500 mr-2"></i> 知识分享
                        </h3>
                        <p class="text-gray-700 mb-4">
                            分享Bug处理经验，提升团队的整体问题解决能力。
                        </p>
                        <div class="flex flex-wrap gap-2">
                            <span class="tool-badge px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">技术分享会</span>
                            <span class="tool-badge px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">知识库</span>
                            <span class="tool-badge px-3 py-1 bg-gray-100 text-gray-800 rounded-full text-sm">Wiki</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Summary Card -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
        <div class="bg-indigo-50 rounded-xl p-8 shadow-inner border border-indigo-100">
            <h2 class="text-2xl font-bold mb-4 text-indigo-700 font-serif">关键要点总结</h2>
            <ul class="space-y-3 text-gray-700">
                <li class="flex items-start">
                    <i class="fas fa-check-circle text-indigo-500 mt-1 mr-2"></i>
                    <span>建立系统化的Bug处理流程可以显著提高问题解决效率</span>
                </li>
                <li class="flex items-start">
                    <i class="fas fa-check-circle text-indigo-500 mt-1 mr-2"></i>
                    <span>充分利用日志分析和调试工具可以快速定位问题根源</span>
                </li>
                <li class="flex items-start">
                    <i class="fas fa-check-circle text-indigo-500 mt-1 mr-2"></i>
                    <span>完善的测试和验证流程确保修复质量，防止引入新问题</span>
                </li>
                <li class="flex items-start">
                    <i class="fas fa-check-circle text-indigo-500 mt-1 mr-2"></i>
                    <span>知识共享和文档更新有助于团队经验积累和问题预防</span>
                </li>
                <li class="flex items-start">
                    <i class="fas fa-check-circle text-indigo-500 mt-1 mr-2"></i>
                    <span>有效的团队协作和沟通是复杂问题解决的关键因素</span>
                </li>
            </ul>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            }
        });
        
        // Simple animation for step cards on scroll
        document.addEventListener('DOMContentLoaded', function() {
            const stepCards = document.querySelectorAll('.step-card');
            
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.style.opacity = '1';
                        entry.target.style.transform = 'translateY(0)';
                    }
                });
            }, { threshold: 0.1 });
            
            stepCards.forEach(card => {
                card.style.opacity = '0';
                card.style.transform = 'translateY(20px)';
                card.style.transition = 'all 0.6s ease';
                observer.observe(card);
            });
        });
    </script>
</body>
</html>
```